<template>
  <div>
    <div class="userCom"></div>
    <div class="uc1">
      <h3 class="uc2">用户评论</h3>
    </div>
    <div class="uc3">
      <el-image
        :src="heads"
        class="imageUc"
        width="100%"
        height="100%"
      />
    </div>
    <div
      class="uc4"
    >
      <el-input
        class="uc5"
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="textarea"
      >
      </el-input>
    </div>
    <div class="uc6">
      <el-button type="primary" class="uc7" @click="addCom">发表评论</el-button>
    </div>
    <el-divider></el-divider>
  </div>
</template>
<script setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'
import router from '@/router/index.js'
const heads = ref()
const movie = ref('')
const form = reactive({
  uid: '',
  mid: '',
  desn: ''
})
const textarea = ref('')
onMounted(() => {
  const movieName = JSON.parse(sessionStorage.getItem('movieInfo'))
  const uid = JSON.parse(sessionStorage.getItem('uid'))
  if (uid === null) {
    router.push('/')
  } else {
    axios.get('/api/movie/getMovieByMname/' + movieName).then((res) => {
      if (res.data !== null) {
        movie.value = res.data
      } else {
        ElMessage({
          showClose: true,
          message: '网络错误！',
          type: 'error'
        })
      }
    })

    const userHeadsrc = JSON.parse(sessionStorage.getItem('headSrc'))
    heads.value = require('@/assets/UserPic/' + userHeadsrc)
  }
})

const addCom = () => {
  form.uid = JSON.parse(sessionStorage.getItem('uid'))
  form.mid = movie.value[0].mid
  form.desn = textarea.value
  axios.post('/api/comment/addComment', form).then((res) => {
    if (res.data != null) {
      ElMessage({
        showClose: true,
        message: '评论成功！',
        type: 'success'
      })
    } else {
      ElMessage({
        showClose: true,
        message: '网络错误！',
        type: 'error'
      })
    }
  })
  textarea.value = ''
}
</script>
<style lang="scss" scoped>
.userCom {
  background-color: burlywood;
  width: 10px;
  height: 30px;
  margin-left: 2px;
  margin-top: -100px;
}
.uc1{
  width: 100%; height: 30px; margin-left: 1%; margin-top: -9%
}
.uc2{
  display: flex; float: left; margin-top: -6px; margin-left: 20px
}
.uc3{
  height: 50px; width: 50px; margin-left: 1%; margin-top: 1%
}
.imageUc{
  border-radius: 50%; overflow: hidden
}
.uc4{
  width: 100%; height: 80px; background-color: white; margin-left: 31%; margin-top: -15%
}
.uc5{
  height: 100%
}
.uc6{
  margin-top: -14px; margin-left: 98%
}
.uc7{
  margin-right: -1%
}
</style>
